<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改训练任务')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-trainMission-edit" th:object="${trainMission}">
        <input id="id" name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">训练任务名称：</label>
            <div class="col-sm-8">
                <input id="trainMissionName" name="trainMissionName" th:field="*{trainMissionName}" class="form-control" type="text">
            </div>
        </div>
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">模型：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <select id="model" name="model" th:field="*{model}" class="form-control" type="text"></select>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">训练数据集：</label>
            <div class="col-sm-8">
                <select id="datasetTrain" name="datasetTrain" th:field="*{datasetTrain}" class="form-control"
                        type="text"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">验证数据集：</label>
            <div class="col-sm-8">
                <select id="datasetVal" name="datasetVal" th:field="*{datasetVal}" class="form-control" type="text"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">batch_size：</label>
            <div class="col-sm-8">
                <input id="batchSize" name="batchSize" th:field="*{batchSize}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">最小训练轮数：</label>
            <div class="col-sm-8">
                <input id="minEpoch" name="minEpoch" th:field="*{minEpoch}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">最大训练轮数：</label>
            <div class="col-sm-8">
                <input id="maxEpoch" name="maxEpoch" th:field="*{maxEpoch}" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">早停：</label>
            <div class="col-sm-8">
                <input id="earlyStop" name="earlyStop" th:field="*{earlyStop}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">学习率：</label>
            <div class="col-sm-8">
                <input id="opLr" name="opLr" th:field="*{opLr}" class="form-control" type="text">
            </div>
        </div>
        <!--			<div class="form-group">	-->
        <!--				<label class="col-sm-3 control-label">归属用户：</label>-->
        <!--				<div class="col-sm-8">-->
        <!--					<input id="userId" name="userId" th:field="*{userId}" class="form-control" type="text">-->
        <!--				</div>-->
        <!--			</div>-->
        <div class="form-group" style="display: none" >
            <label class="col-sm-3 control-label">训练数据集id：</label>
            <div class="col-sm-8">
                <input id="datasetTrainId" name="datasetTrainId" th:field="*{datasetTrainId}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group" style="display: none" >
            <label class="col-sm-3 control-label">验证数据集id：</label>
            <div class="col-sm-8">
                <input id="datasetValId" name="datasetValId" th:field="*{datasetValId}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group" style="display: none">
            <label class="col-sm-3 control-label" style="display: none">模型id：</label>
            <div class="col-sm-8">
                <input id="modelId" name="modelId" th:field="*{modelId}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">训练状态：</label>
            <div class="col-sm-8">
                <!--                改为下拉框，只有未训练，待训练，训练中，已完成，训练异常五种状态-->
                <select id="status" name="status" th:field="*{status}" class="form-control" type="text">
                    <option value="未训练">未训练</option>
                    <option value="待训练">待训练</option>
                    <option value="训练中">训练中</option>
                    <option value="已完成">已完成</option>
                    <option value="训练异常">训练异常</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否公开：</label>
            <div class="col-sm-8">
                <!--                下拉框是或否-->
                <select id="isPublic" name="isPublic" th:field="*{isPublic}" class="form-control">
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
                <!--                <input id="isPublic" name="isPublic" th:field="*{isPublic}" class="form-control" type="text">-->
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "deep_learning/trainMission";
    $("#form-trainMission-edit").validate({
        rules: {
            xxxx: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-trainMission-edit').serialize());
        }
        window.parent.postMessage('refreshTable', '*');
    }

    $(document).ready(function () {
        let id = null;  // 模型id
        let name = null; // 模型名称
        let user_id = null;  //归属用户id
        let user = null;  //归属用户名
        // ----------模型
        $.ajax({
            url: '/deep_learning/trainMission/selectModelAndUser',
            type: 'GET',
            processData: false,
            contentType: false,
            success: function (response) {
                // 假设响应是一个字符串数组
                let models = response;
                // console.log(models)
                // 将每个元素解析为一个选项
                models.forEach(function (model) {
                    // 假设每个元素的格式为 "id|name|version|user"
                    let parts = model.split('|');
                    id = parts[0];  // 模型id
                    name = parts[1]; // 模型名称
                    user_id = parts[2];  //归属用户id
                    user = parts[3];  //归属用户名

                    // 创建选项元素，将id存储在value中，将user_id存储在data-user-id属性中
                    let option = new Option(`${name} ------- 归属用户：${user}`, name);
                    option.setAttribute('data-user-id', user_id);
                    option.setAttribute('data-model-id', id)
                    $('#model').append(option);
                });
                // 获取当前行的模型id，并设置当前行的模型名称
                let selectedId = $('#modelId').val();
                let selectedOption = $('#model option[value="' + selectedId + '"]');
                // console.log("selectedOption:",selectedOption)
                if (selectedOption.length > 0) {
                    $('#model').val(selectedOption.val());
                }

                document.getElementById('model').addEventListener('change', function () {
                    let selectedId = this.options[this.selectedIndex].getAttribute('data-model-id');// 获取id
                    let selectedOption = this.options[this.selectedIndex];
                    let selectedUserId = this.options[this.selectedIndex].getAttribute('data-user-id'); // 获取user_id
                    let selectedName = selectedOption.text.split(' ------- ')[0]; // 提取 name
                    // console.log(`Selected ID: ${selectedId}, User ID: ${selectedUserId}`);
                    // 更新 #model 的值
                    $('#modelId').val(selectedId);
                    // console.log(selectedName)
                    $('#model').val(selectedName)  //
                });
            },
            error: function (xhr, status, error) {
                let errorMessage = "请求失败，发生未知错误。";

                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    try {
                        const jsonResponse = JSON.parse(xhr.responseText);
                        if (jsonResponse.message) {
                            errorMessage = jsonResponse.message;
                        } else {
                            errorMessage = xhr.responseText;
                        }
                    } catch (e) {
                        errorMessage = xhr.responseText;
                    }
                }
                Swal.fire({
                    icon: 'error',
                    title: '请求失败',
                    text: '错误信息: ' + errorMessage,
                    showConfirmButton: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
            }
        });

        $.ajax({
            url: '/deep_learning/trainMission/selectDatasetAndUser',
            type: 'GET',
            processData: false,
            contentType: false,
            success: function (response) {
                // 假设响应是一个字符串数组
                let models = response;

                // 将每个元素解析为一个选项
                models.forEach(function (model) {
                    // 假设每个元素的格式为 "id|name|version|user"
                    let parts = model.split('|');
                    id = parts[0];  // 模型id
                    name = parts[1]; // 模型名称
                    user_id = parts[2];  //归属用户id
                    user = parts[3];  //归属用户名

                    // 创建选项元素，将id存储在value中，将user_id存储在data-user-id属性中
                    let option = new Option(`${name} ------- 归属用户：${user}`, name);
                    // console.log('user_id：'+user_id)
                    option.setAttribute('data-user-id', user_id);
                    option.setAttribute('data-datasetTrain-id', id)
                    $('#datasetTrain').append(option);


                });
                // 获取当前行的训练数据集id，并设置当前行的训练数据集名称为选中的值
                let selectedId = $('#datasetTrainId').val();
                let selectedOption = $('#datasetTrain option[data-datasetTrain-id="' + selectedId + '"]');
                // console.log("selectedOption:",selectedOption)
                if (selectedOption.length > 0) {
                    $('#datasetTrain').val(selectedOption.val());
                }

                document.getElementById('datasetTrain').addEventListener('change', function () {
                    // console.log('this.value：'+this.value)
                    let selectedId = this.options[this.selectedIndex].getAttribute('data-datasetTrain-id');  // 获取id
                    let selectedOption = this.options[this.selectedIndex];
                    let selectedUserId = this.options[this.selectedIndex].getAttribute('data-user-id'); // 获取user_id
                    // console.log(`Selected DatasetTrain ID: ${selectedId}, User ID: ${selectedUserId}`);
                    // 	表单赋值
                    // console.log('selectedId：'+selectedId)
                    // 打印当前选中的option
                    $('#datasetTrainId').val(selectedId);
                    $('#datasetTrain').val(selectedOption.text.split(' ------- ')[0])  //
                });
            },
            error: function (xhr, status, error) {
                let errorMessage = "请求失败，发生未知错误。";

                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    try {
                        const jsonResponse = JSON.parse(xhr.responseText);
                        if (jsonResponse.message) {
                            errorMessage = jsonResponse.message;
                        } else {
                            errorMessage = xhr.responseText;
                        }
                    } catch (e) {
                        errorMessage = xhr.responseText;
                    }
                }
                Swal.fire({
                    icon: 'error',
                    title: '请求失败',
                    text: '错误信息: ' + errorMessage,
                    showConfirmButton: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
            }
        });
        $.ajax({
            url: '/deep_learning/trainMission/selectDatasetAndUser',
            type: 'GET',
            processData: false,
            contentType: false,
            success: function (response) {
                // 假设响应是一个字符串数组
                let models = response;

                // 将每个元素解析为一个选项
                models.forEach(function (model) {
                    // 假设每个元素的格式为 "id|name|version|user"
                    let parts = model.split('|');
                    id = parts[0];  // 模型id
                    name = parts[1]; // 模型名称
                    user_id = parts[2];  //归属用户id
                    user = parts[3];  //归属用户名

                    // 创建选项元素，将id存储在value中，将user_id存储在data-user-id属性中
                    let option = new Option(`${name} ------- 归属用户：${user}`, name);
                    option.setAttribute('data-user-id', user_id);
                    option.setAttribute('data-datasetVal-id', id)
                    $('#datasetVal').append(option);
                    // console.log(option)
                });
                // 获取当前行的验证数据集id，并设置当前行的验证数据集名称为选中的值
                let selectedId = $('#datasetValId').val();
                let selectedOption = $('#datasetVal option[data-datasetVal-id="' + selectedId + '"]');
                // console.log("selectedOption:",selectedOption)
                if (selectedOption.length > 0) {
                    $('#datasetVal').val(selectedOption.val());
                }


                document.getElementById('datasetVal').addEventListener('change', function () {
                    let selectedId = this.options[this.selectedIndex].getAttribute('data-datasetVal-id');  // 获取id
                    let selectedUserId = this.options[this.selectedIndex].getAttribute('data-user-id'); // 获取user_id
                    // console.log(`Selected DatasetVal ID: ${selectedId}, User ID: ${selectedUserId}`);
                    // 	表单赋值
                    $('#datasetValId').val(selectedId);
                    // console.log(`datasetValId: ${selectedId}`)
                    $('#datasetVal').val(this.options[this.selectedIndex].text.split(' ------- ')[0])  //
                });
            },
            error: function (xhr, status, error) {
                let errorMessage = "请求失败，发生未知错误。";

                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    try {
                        const jsonResponse = JSON.parse(xhr.responseText);
                        if (jsonResponse.message) {
                            errorMessage = jsonResponse.message;
                        } else {
                            errorMessage = xhr.responseText;
                        }
                    } catch (e) {
                        errorMessage = xhr.responseText;
                    }
                }
                Swal.fire({
                    icon: 'error',
                    title: '请求失败',
                    text: '错误信息: ' + errorMessage,
                    showConfirmButton: true,
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
            }
        });
    });
</script>
</body>
</html>
